import { computed, h, watchEffect } from 'vue'

export default function Mask (props) {
  watchEffect(() => {
    console.log(props)
  })
  const position = props.position
  console.log(position, 'position')

  const style = computed(() => {
    const size = Math.max(position.width, position.height) * 2
    const isEnter = position.enter
    return {
      transform: `translate(${position.x - size / 2}px, ${
        position.y - size / 2
      }px)`,
      backgroundImage: isEnter
        ? `radial-gradient(transparent, #000 60px, #000)`
        : '',
      backgroundColor: isEnter ? '' : '#000',
      width: size ? size + 'px' : '100%',
      height: size ? size + 'px' : '100%'
    }
  })
  console.log(style.value, 'yangshi')

  return <div class='mask' style={style.value} />
}
